<template>
  <div class="add_questions">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/Index/questionMange/test_questions' }">网球规则</el-breadcrumb-item>
      <el-breadcrumb-item>{{type}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form ref="form" :model="form" label-width="80px" class="form" :inline="true">
      <el-form-item label="题库类型:">
        <el-select
          v-model="form.rule"
          style="width: 185px;margin-right: 20px;"
          placeholder="网球规则"
          @change="ruleChange"
        >
          <el-option
            :label="item.cate_name"
            :value="item.id"
            v-for="(item, index) in getLibTypeArr"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="知识点名称:" label-width="90px">
        <el-select
          v-model="form.knowledgeT"
          style="width: 185px;margin-right: 20px;"
          placeholder="知识点名称"
          @change="knowledgeChange"
        >
          <el-option
            :label="item.cate_name"
            :value="item.id"
            v-for="(item, index) in knowledgeArr"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="级别:" label-width="50px">
        <el-select v-model="form.level" style="width: 185px;" placeholder="级别">
          <el-option
            :label="item.cate_name"
            :value="item.id"
            v-for="(item, index) in levelArr"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div style="display: flex;margin-bottom: 22px;">
      <span style="display: block;width: 80px;padding-left: 12px;box-sizing: border-box;">题目:</span>
      <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
    </div>
    <el-form label-width="80px" style="display: flex;width: 60%;">
      <div style="width:50%;">
        <el-radio-group v-model="form.answer">
          <el-form-item label="选择项A:">
            <div style="display: flex;">
              <el-input v-model="form.section_a"></el-input>
              <el-form-item label-width="15px">
                <el-radio label="A"></el-radio>
              </el-form-item>
            </div>
          </el-form-item>
          <el-form-item label="选择项B:">
            <div style="display: flex;">
              <el-input v-model="form.section_b"></el-input>
              <el-form-item label-width="15px">
                <el-radio label="B"></el-radio>
              </el-form-item>
            </div>
          </el-form-item>
          <el-form-item label="选择项C:">
            <div style="display: flex;">
              <el-input v-model="form.section_c"></el-input>
              <el-form-item label-width="15px">
                <el-radio label="C"></el-radio>
              </el-form-item>
            </div>
          </el-form-item>
          <el-form-item label="选择项C:">
            <div style="display: flex;">
              <el-input v-model="form.section_d"></el-input>
              <el-form-item label-width="15px">
                <el-radio label="D"></el-radio>
              </el-form-item>
            </div>
          </el-form-item>
        </el-radio-group>
      </div>
      <div style="width:50%;">
        <el-form-item label="A解答">
          <el-input v-model="form.reason_a"></el-input>
        </el-form-item>
        <el-form-item label="B解答">
          <el-input v-model="form.reason_b"></el-input>
        </el-form-item>
        <el-form-item label="C解答">
          <el-input v-model="form.reason_c"></el-input>
        </el-form-item>
        <el-form-item label="D解答">
          <el-input v-model="form.reason_d"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <div style="text-align: center;margin-top: 50px;padding-bottom: 20px;">
      <el-button type="primary" plain style="margin-right: 20px;" @click.stop="submitForm">提交</el-button>
      <el-button plain @click.stop="back">返回</el-button>
    </div>
  </div>
</template>

<script>
import Uediter from "@/components/UE/UE.vue";
export default {
  components: {
    Uediter
  },
  data() {
    return {
      type: this.$route.query.name,
      content: "",
      ueditor: {
        value: "",
        config: {
          initialFrameWidth: 940,
          initialFrameHeight: 300
        }
      },
      form: {
        rule: "",
        knowledgeT: "",
        level: "",
        textarea: "",
        section_a: "",
        section_b: "",
        section_c: "",
        section_d: "",
        reason_a: "",
        reason_b: "",
        reason_c: "",
        reason_d: "",
        answer: ""
      },
      getLibTypeArr: [],
      knowledgeArr: [],
      levelArr: [
        {
          id: 1,
          cate_name: "一级试题"
        },
        {
          id: 2,
          cate_name: "二级试题"
        }
      ]
    };
  },
  created() {
    this.getTopic();
    this.getLibType();
  },
  methods: {
    getLibType() {
      return new Promise((resolve, reject) => {
        this.$axios
          .post(
            "/Qlib/getLibType",
            {},
            {
              headers: {
                token: window.sessionStorage.getItem("token")
              }
            }
          )
          .then(res => {
            const { code, data, msg } = res.data;
            if (code == 2000) {
              this.getLibTypeArr = data;
              resolve();
            }
          })
          .catch(error => {});
      });
    },
    getTopic() {
      this.$axios
        .post(
          "/Qlib/edit_lib_info",
          {
            id: this.$route.query.id
          },
          {
            headers: {
              token: window.sessionStorage.getItem("token")
            }
          }
        )
        .then(res => {
          const { code, data, msg } = res.data;
          if (code == 2000) {
            this.form = data;
            this.form.rule = data.cid;
            this.ruleChange(data.cid);
            this.form.knowledgeT = data.qcate_id;
            this.ueditor.value = data.question_item;
            var ue = UE.getEditor("editor");
            ue.setContent(this.ueditor.value);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    ruleChange(val) {
      return new Promise((resolve, reject) => {
        this.$axios
          .post(
            "/Qlib/select_cate_name",
            {
              id: val
            },
            {
              headers: {
                token: window.sessionStorage.getItem("token")
              }
            }
          )
          .then(res => {
            const { code, data, msg } = res.data;
            if (code == 2000) {
              this.knowledgeT = val;
              this.knowledgeArr = data;
            } else {
              this.$message({
                type: "info",
                message: msg
              });
            }
          })
          .catch(error => {});
      });
    },
    knowledgeChange(val) {},
    submitForm() {
      this.content = this.$refs.ue.getUEContent();
      this.$axios
        .post(
          "/Qlib/saveQuestion",
          {
            id: this.$route.query.id,
            qcate_id: this.form.knowledgeT,
            level: this.form.level,
            // question_item: this.form.textarea,
            question_item: this.content,
            section_a: this.form.section_a,
            section_b: this.form.section_b,
            section_c: this.form.section_c,
            section_d: this.form.section_d,
            reason_a: this.form.reason_a,
            reason_b: this.form.reason_b,
            reason_c: this.form.reason_c,
            reason_d: this.form.reason_d,
            answer: this.form.answer
          },
          {
            headers: {
              token: window.sessionStorage.getItem("token")
            }
          }
        )
        .then(res => {
          const { code, data, msg } = res.data;
          if (code == 2000) {
            this.$message({
              type: "success",
              message: msg
            });
          } else {
            this.$message({
              type: "error",
              message: msg
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped lang="less">
.form {
  margin-top: 20px;
}

.add_questions {
  margin: 20px 50px;
}
</style>
